{% extends 'xadmin/base/base.html' %}
{% load static %}

{% block title %}
    课程发布页
{% endblock %}

{% block link %}
    <link rel="stylesheet" href="{% static 'plugins/editormd/css/editormd.css' %}">
{% endblock %}



{% block content_header %}
    课程发布
{% endblock %}

{% block header_option_desc %}
    书是人类进步的阶梯
{% endblock %}


{% block content %}
    <div class="row">
        <div class="col-md-12 col-xs-12 col-sm-12">
            <div class="box box-primary">
                <div class="box-body">

                    <div class="form-group" style="margin-top: 30px;">
                        <label for="news-title">课程标题(150个字以内)</label>
                        {% if course %}
                            <input type="text" class="form-control" id="news-title" name="news-title" placeholder="请输入课程标题"
                                   value="{{ course.title }}">
                        {% else %}
                            <input type="text" class="form-control" id="news-title" name="news-title" placeholder="请输入课程标题"
                                   autofocus>
                        {% endif %}
                    </div>

                    <div class="form-group">
                        <label for="news-desc">课程简介</label>
                        {% if course %}
                            <textarea name="news-desc" id="news-desc" placeholder="请输入课程简介" class="form-control"
                                      style="height: 8rem; resize: none;">{{ course.profile }}</textarea>
                        {% else %}
                            <textarea name="news-desc" id="news-desc" placeholder="请输入课程简介" class="form-control"
                                      style="height: 8rem; resize: none;"></textarea>
                        {% endif %}
                    </div>


                    <div class="form-group" id="container">
                        <label for="news-thumbnail-url">课程封面图</label>
                        <div class="input-group">
                            {% if course %}
                                <input type="text" class="form-control" id="news-thumbnail-url" name="news-thumbnail-url"
                                       placeholder="请上传图片或输入封面图地址" value="{{ course.cover_url }}">
                            {% else %}
                                <input type="text" class="form-control" id="news-thumbnail-url" name="news-thumbnail-url"
                                       placeholder="请上传图片或输入封面图地址">
                            {% endif %}

                            <div class="input-group-btn">
                                <label class="btn btn-default btn-file">
                                    上传至服务器 <input type="file" id="upload-image-server">
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="progress-bar" style="display: none">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0;">0%</div>
                        </div>
                    </div>


                    <div class="form-group">
                        <label for="docs-file-url">视频地址</label>
                        <div class="input-group">
                            {% if course %}
                                <input type="text" class="form-control" id="docs-file-url" name="docs-file-url"
                                       placeholder="请上传视频或输入视频地址" value="{{ course.video_url }}">
                            {% else %}
                                <input type="text" class="form-control" id="docs-file-url" name="docs-file-url"
                                       placeholder="请上传视频或输入视频地址">
                            {% endif %}

                            <div class="input-group-btn">
                                <label class="btn btn-default btn-file">
                                    上传至服务器 <input type="file" id="upload-file-server">
                                </label>

                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="course-teacher">课程讲师</label>
                        <select name="course-teacher" id="course-teacher" class="form-control">
                            <option value="0">-- 请选择讲师 --</option>
                            {% for teacher in teachers %}
                                {% if course and teacher == course.teacher %}
                                    <option value="{{ teacher.id }}" selected>{{ teacher.name }}</option>
                                {% else %}
                                    <option value="{{ teacher.id }}">{{ teacher.name }}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </div>


                    <div class="form-group">
                        <label for="course-category">课程分类</label>
                        <select name="course-category" id="course-category" class="form-control">
                            <option value="0">-- 请选择分类 --</option>
                            {% for category in categories %}
                                {% if course and category == course.category %}
                                    <option value="{{ category.id }}" selected>{{ category.name }}</option>
                                {% else %}
                                    <option value="{{ category.id }}">{{ category.name }}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </div>


                    <div class="form-group">
                        <label for="course-outline">课程大纲</label>
                        {% if course %}
                            <div id="course-outline">
                                <textarea name="content" id="content">{{ course.outline|safe }}</textarea>
                            </div>
                        {% else %}
                            <div id="course-outline">
                                <textarea name="content" id="content"></textarea>
                            </div>
                        {% endif %}
                    </div>


                </div>
                <div class="box-footer">
                    {% if course %}
                        <a href="javascript:void (0);" class="btn btn-primary pull-right" id="btn-pub-news"
                           data-news-id="{{ course.id }}">更新课程 </a>
                    {% else %}
                        <a href="javascript:void (0);" class="btn btn-primary pull-right" id="btn-pub-news">发布课程 </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script src="{% static 'plugins/editormd/editormd.js' %}"></script>
    <script>
        let testEditor;
        $(function () {
            $.get("{% static 'plugins/editormd/examples/test.md' %}", function (md) {
                testEditor = editormd("course-outline", {
                    width: "98%",
                    height: 730,
                    path: "{% static 'plugins/editormd/lib/' %}",
                    markdown: md,
                    codeFold: true,
                    saveHTMLToTextarea: true,
                    searchReplace: true,
                    htmlDecode: "style,script,iframe|on*",
                    emoji: true,
                    taskList: true,
                    tocm: true,         			// Using [TOCM]
                    tex: true,                   // 开启科学公式TeX语言支持，默认关闭
                    flowChart: true,             // 开启流程图支持，默认关闭
                    sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
                    imageUpload: true,
                    imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                    imageUploadURL: "{% url 'x-admin:image_upload' %}",
                    {#          onload: function () {#}
                    {#            console.log('onload', this);#}
                    {##}
                    {#          },#}
                    /**设置主题颜色 把这些注释去掉主题就是黑色的了*/
                    {#          editorTheme: "pastel-on-dark",#}
                    {#          theme: "dark",#}
                    {#          previewTheme: "dark"#}
                });
            });
        });

    </script>
    <script src="{% static 'node_modules/@baiducloud/sdk/dist/baidubce-sdk.bundle.js' %}"></script>
    <script src="{% static 'xadmin/js/course/course_pub.js' %}"></script>
{% endblock %}
